<template>
  <div class="search-model-layout">
    <!-- 搜索框区域 -->
    <div class="search-box">
      <input
        type="text"
        :placeholder="currentPlaceholder"
        v-model="searchQuery"
        @keyup.enter="performSearch"
        class="search-input"
      />
      <button @click="performSearch" class="search-button">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
      </button>
    </div>

    <!-- 导航标签 -->
    <div class="search-nav">
      <div 
        v-for="(item, index) in funnav" 
        :key="index"
        class="nav-item"
        :class="{ 'active': activeTab === item.value }"
        @click="changeNav(item.value, item.placeholder)"
      >
        {{ item.name }}
      </div>
    </div>
    
    <!-- 内容区域 -->
    <div class="search-content">
      <div v-if="activeTab === 'searchUser'"   v-show="!show_search_value" class="tab-content">
        <div class="search-placeholder">
          <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
            <circle cx="9" cy="7" r="4"></circle>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
          </svg>
          <p>输入好友ID或昵称</p>
        </div>
        
      </div>
      
      <div v-if="activeTab === 'searchAll'"  v-show="!show_search_value" class="tab-content">
        <div class="search-placeholder">
          <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M18 21a6 6 0 0 0-12 0" />
            <circle cx="12" cy="11" r="4" />
            <circle cx="12" cy="4" r="1" />
            <circle cx="6" cy="4" r="1" />
            <circle cx="18" cy="4" r="1" />
          </svg>
          <p>输入群组ID或名称</p>
        </div>
      </div>



        <div class="search-result">
          <!-- 搜索结果将在这里显示 -->
          <LIST  v-show="show_search_value" v-model:search_data="curent_SearchData"/>
        </div>
    </div>
  </div>
</template>

<script setup>
import { inject, onUnmounted, ref, watch } from 'vue';
import { find_user_group, search_user_friend_group } from "@/api/chat/room.js"
import { customDivision } from "@/static/js/number/division.js"
import { getUniqueItemsFromSecondArray_byId} from "@/static/js/array/concat_two_norepeat.js"
import LIST from "./list.vue"
let curent_SearchData=ref([])
const user = inject('user')()
let show_search_value=ref(false)
const funnav = [
  {
    name: '查找好友/群组',
    value: 'searchUser',
    placeholder: '输入好友/群组/ID或昵称',
  },
  {
    name: '搜索用户/群组',
    value: 'searchAll',
    placeholder: '输入用户/群组/ID或昵称',
  },
];

const activeTab = ref('searchUser');
const currentPlaceholder = ref(funnav.find(item => item.value === activeTab.value)?.placeholder);
const searchQuery = ref('');
const lastQuery=ref('')

const changeNav = (value, placeholder) => {
  activeTab.value = value;
  currentPlaceholder.value = placeholder;
  searchQuery.value = '';
  curent_SearchData.value = []
  show_search_value.value=false
};

const Mapper = {
  searchUser:search_user_friend_group,
  searchAll:find_user_group
};

const performSearch = async () => {
  if (lastQuery.value != searchQuery.value) { curent_SearchData.value=[]}
  if (user.value?.get_user()?.id && searchQuery.value.trim() !== '') { 
        show_search_value.value=true
        // 后端条目默认20条
        const searchType = Mapper[activeTab.value];
        if (searchType) {
          const data = await searchType(user.value?.get_user()?.id, searchQuery.value,
            customDivision(curent_SearchData.value.length, 20))
          if (data.pagination.total > 0) { 
            curent_SearchData.value=[...curent_SearchData.value,...getUniqueItemsFromSecondArray_byId(
               curent_SearchData.value, data.data,
              'id',)]
          }
        }
    lastQuery.value=searchQuery.value
  }
}

onUnmounted(() => { 
  show_search_value.value=false
})

</script>

<style scoped>
.search-model-layout {
  width: 235px;
  /* height: 360px; */
  margin: 0 auto;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  background-color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: visible;
}

.search-box {
  padding: 10px;
  /* background-color: #f8f8f8; */
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  gap: 6px;
  align-items: center;
}

.search-input {
  padding: 6px 10px;
  border: 1px solid #d9d9d9;
  border-radius: 15px;
  outline: none;
  font-size: 12px;
  flex: 1;
  transition: all 0.2s ease;
  background-color: transparent;
  height: 28px;
  box-sizing: border-box;
}

.search-input:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}

.search-button {
  padding: 5px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.search-button:hover {
  background-color: #40a9ff;
}

.search-button svg {
  display: block;
}

.search-nav {
  display: flex;
  /* background-color: #f8f8f8; */
  border-bottom: 1px solid #e0e0e0;
}

.nav-item {
  padding: 8px 0;
  cursor: pointer;
  font-size: 12px;
  flex: 1;
  text-align: center;
  transition: all 0.2s ease;
  color: #666;
  position: relative;
}

.nav-item:hover {
  color: #1890ff;
  background-color:#b1ccfa;
}

.nav-item.active {
  color: #1890ff;
  font-weight: 500;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 2px;
  background-color: #1890ff;
  border-radius: 1px;
}

.search-content {
  flex: 1;  
  min-height: 0; 
  overflow: visible;
  display: flex;
  max-height: calc(100vh - 200px);
  flex-direction: column;
}

.tab-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.search-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  text-align: center;
  padding: 10px 0;
}

.search-placeholder svg {
  margin-bottom: 8px;
}

.search-placeholder p {
  font-size: 12px;
  margin: 0;
  color: #aaa;
}

.search-result {
  flex: 1;
  width: 100%;
  padding: 6px 0;
  overflow: visible;
  box-sizing: border-box;
}
/* 滚动条样式 */
.search-result::-webkit-scrollbar {
  width: 4px;
}

.search-result::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.search-result::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

.search-result::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>